<div id="user" style="padding:20px 40px 40px;background:#fff;">
    <div class="resource_management">
        <div class="loader" ng-show="!myamounts">
            <div class="loader-inner ball-clip-rotate-multiple">
                <div></div>
                <div></div>
            </div>
        </div>
        <div ng-show="myamounts">
            <uib-tabset class="tab-default tab-zn-default" active="check">
                <uib-tab index="1" ng-if="false">

                    <uib-tab-heading>
                        <i class="planbg"></i>&nbsp;&nbsp;套餐管理
                    </uib-tab-heading>
                    <div class="row" style="margin-bottom: 30px;">
                        <h5 class='col-md-12 buy'>您已订购的套餐</h5>
                        <section class='col-md-12'>
                            <div class="col-md-3">
                                <figure class="plan">
                                    <figcaption>计费资源</figcaption>
                                    <p class=planb><span>XS高级版套餐</span></p>
                                    <article>
                                        <div>
                                            <div class="cpu  pull-left" style='margin-left: 5px;'>
                                                <span class="subtitle">CPU</span>
                                                <span class=peie style='margin-left: 10px;'>1X</span>
                                            </div>
                                            <div class="memory pull-right" style='margin-right: 5px;'>
                                                <span class="subtitle">内存</span>
                                                <span class=peie style='margin-left: 10px;'>2G</span>
                                            </div>
                                        </div>
                                    </article>
                                    <div class='meiy'>
                                <span class="meiyue">
                                    ￥466/月
                                </span>
                                    </div>
                                    <p>还有20天到期</p>
                                    <button class='btn btn-orange'>更改套餐</button>
                                </figure>
                            </div>
                            <div class="col-md-3">
                                <figure class="plan">
                                    <figcaption>储存资源</figcaption>
                                    <p class=planb><span>XS高级版套餐</span></p>
                                    <article>
                                        <div>
                                            <div class="cpu  pull-left" style='margin-left: 5px;'>
                                                <span class="subtitle">CPU</span>
                                                <span class=peie style='margin-left: 10px;'>1X</span>
                                            </div>
                                            <div class="memory pull-right" style='margin-right: 5px;'>
                                                <span class="subtitle">内存</span>
                                                <span class=peie style='margin-left: 10px;'>2G</span>
                                            </div>
                                        </div>
                                    </article>
                                    <div class='meiy'>
                                <span class="mianfei">
                                    免费
                                </span>
                                    </div>
                                    <p>还有20天到期</p>
                                    <button class='btn btn-orange'>更改套餐</button>
                                </figure>
                            </div>
                            <div class="col-md-3">
                                <figure class="plan">
                                    <figcaption>网络资源</figcaption>
                                    <div class=circle>

                                    </div>
                                    <p class='notbuy'>您还没有订购套餐</p>
                                    <button class='btn btn-orange'>更改套餐</button>
                                </figure>
                            </div>
                            <div class="col-md-3">
                                <figure class="plan">
                                    <figcaption>团队协作</figcaption>
                                    <p class=planb><span>XS高级版套餐</span></p>
                                    <article>
                                        <div>
                                            <div class="cpu  pull-left" style='margin-left: 5px;'>
                                                <span class="subtitle">CPU</span>
                                                <span class=peie style='margin-left: 10px;'>1X</span>
                                            </div>
                                            <div class="memory pull-right" style='margin-right: 5px;'>
                                                <span class="subtitle">内存</span>
                                                <span class=peie style='margin-left: 10px;'>2G</span>
                                            </div>

                                        </div>
                                    </article>
                                    <div class='meiy'>
                                <span class="meiyue">
                                    ￥466/月
                                </span>
                                    </div>
                                    <p>还有20天到期</p>
                                    <button class='btn btn-orange'>更改套餐</button>
                                </figure>
                            </div>

                        </section>
                    </div>

                </uib-tab>
                <uib-tab index="2" ng-if="false">
                    <uib-tab-heading>
                        <i class="accountbg"></i>&nbsp;&nbsp;账户信息
                    </uib-tab-heading>
                    <div class="row" style="margin-bottom: 30px;">
                        <h5 class='col-md-12 buy'>账户余额:
                            <span style='color:#F8B551; padding-left: 5px;'>34.54</span>元
                            <a class='btn btn-green'
                               style='width: 45px;height: 24px;padding: 2px;margin-left: 15px; margin-top: -5px'>充值</a>
                        </h5>
                        <div id="tabbtn">
                            <uib-tabset class="tab-default">
                                <uib-tab index="1">
                                    <uib-tab-heading class='head'>
                                        充值记录
                                    </uib-tab-heading>
                                    <!--<date-pick st="grid.st" et="grid.et"></date-pick>-->
                                    <div style="margin-bottom: 15px;">
                                        <div class="dropdown dropdown-select userselect" style="width: 120px;">
                                            <button class="btn dropdown-toggle" data-toggle="dropdown">
                                                <span>{{date || '储值方式'}}</span>
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="javascript:;"
                                                       ng-click="dc.spec.template.spec.restartPolicy = 'Always'">Always</a>
                                                    <a href="javascript:;"
                                                       ng-click="dc.spec.template.spec.restartPolicy = 'OnFailure'">OnFailure</a>
                                                    <a href="javascript:;"
                                                       ng-click="dc.spec.template.spec.restartPolicy = 'Never'">Never</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <date-pick st="grid.st" et="grid.et"></date-pick>
                                        <a style="" href="javascript:;" class="btn btn-orange search"
                                           ng-click="search()"></a>
                                    </div>
                                    <div>
                                        <div>
                                            <div class="timeline" style="padding-top:20px;">
                                                <ul>
                                                    <li>
                                                        <label uib-tooltip="1111">
                                                            <span class="dot"></span>&nbsp;&nbsp;&nbsp;&nbsp;11:11
                                                        </label>
                                                        <div class="container-fluid">
                                                            <div class="row">
                                                                <div class="col-md-4">充值金额: <b class='blod'>￥123</b>
                                                                </div>
                                                                <div class="col-md-4">账户余额:<b class='blod'>￥123</b>
                                                                </div>
                                                                <div class="col-md-4" style="text-align: right">
                                                                    <span class='payway'>支付方式:<b
                                                                            class='blod'>支付宝</b></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                        <!--<c-timeline name="bcName" type="taobao"></c-timeline>-->
                                    </div>
                                </uib-tab>
                                <uib-tab index="2">
                                    <uib-tab-heading class='head'>
                                        账单查询
                                    </uib-tab-heading>
                                    <div>
                                        <div style="margin-bottom: 15px;">
                                            <date-pick st="grid.st" et="grid.et"></date-pick>
                                            <a style="" href="javascript:;" class="btn btn-orange search"
                                               ng-click="search()"></a>
                                        </div>
                                    </div>
                                    <div class="timeline" style="padding-top:20px;">
                                        <ul>
                                            <li>
                                                <label uib-tooltip="账单查询">
                                                    <span class="dot"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                </label>
                                                <div class="container-fluid">
                                                    <div class="row">
                                                        <div class="col-md-4">账单月:2015-2</div>
                                                        <div class="col-md-4">金额:2345</div>
                                                        <div class="col-md-4" style="text-align: right">
                                                            <a class="icon25 icon25-collapse" uib-tooltip="费用明细"
                                                               ng-click="" data-toggle="collapse"
                                                               href="#collapseExample" aria-expanded="false"
                                                               aria-controls="collapseExample" href="javascript:;"></a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="container-fluid collapse" style="margin-top:30px;"
                                                     id="collapseExample">
                                                    <table class="table searchbill">
                                                        <tr>
                                                            <th style="border-top: none;">扣费时间</th>
                                                            <th style="border-top: none;">套餐类别</th>
                                                            <th style="border-top: none;">费用项目</th>
                                                            <th style="border-top: none;">金额</th>
                                                        </tr>
                                                        <tr>
                                                            <td>2016-2-10</td>
                                                            <td>网络资源</td>
                                                            <td>XL专业版</td>
                                                            <td>2345</td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </uib-tab>
                            </uib-tabset>
                        </div>
                    </div>

                </uib-tab>
                <uib-tab index="3" ng-if="false">
                    <uib-tab-heading>
                        <i class="usersbg"></i>&nbsp;&nbsp;用户信息
                    </uib-tab-heading>
                    <div class="row">
                        <form class="form-horizontal" style="margin-left: 30px; margin-right: 30px">
                            <!--<p style="margin-top: 10px; font-size: 16px; font-weight: bold; color: #5a6378">个人信息</p>-->
                            <div class="form-group margin">
                                <label for="usernameInput" class="col-md-2">用户名</label>
                                <div class="col-md-3">
                                    <input type="text" disabled="disabled" class="form-control" id="usernameInput"
                                           ng-model="curUserInfo.username"
                                           style="margin-left: -84px; background-color: #f7f8fb;border:none;background:none;cursor:default;">
                                </div>
                                <div class="col-md-offest-7"></div>
                            </div>
                            <div class="form-group margin">
                                <label for="InputEmail" class="col-md-2">邮箱</label>

                                <div class="col-md-3" >
                                    <input type="email" disabled="disabled" class="form-control" id="InputEmail"
                                           ng-model="curUserInfo.email"
                                           style="margin-left: -84px; background-color: #f7f8fb;border:none;background:none;cursor:default;">
                                </div>
                                <!-- 20161129 jia 邮箱验证暂时去掉-->
                                <div class="col-md-7 activemail" style="margin-top: 8px;margin-left:-10%;display:none;">
                                    <i ng-show="curUserInfo.status.active" class="fa fa-check-circle" id="activation"
                                       style="color: #55c45f; margin-left: -30px"><span
                                            style="margin-left: 5px">已验证</span></i>
                                    <i ng-show="!curUserInfo.status.active" class="fa fa-info-circle" id="inactivation"
                                       style="color: #ec6941"><span style="margin-left: 5px">未验证</span></i>
                                    <span ng-show="!curUserInfo.status.active" class="sendmail" ng-click="sendemail()"
                                          type="button" style="margin-left: 40px">发送激活邮件</span>
                                </div>
                            </div>
                            <div class="form-group margin">
                                <label class="col-md-2">密码</label>
                                <div class="col-md-3" style="margin-top: 5px; margin-left: -72px">
                            <span style="width:30px; height:34px; border: 1px solid #f7f8fb; display: inline-block; margin-right: 15px;">
                                <img src="views/user/img/images_69.png"
                                     style="border: 1px solid #c9c9c9; padding:3px 5px; background-color: #f7f8fb">
                            </span>
                                    <span ng-click="updatePwd()" ID="updatepwd">修改密码</span>
                                </div>
                            </div>
                        </form>

                        <!--<div style="margin-top: 50px">-->
                        <!--<p style="margin-left: 30px; font-size: 16px; font-weight: bold; color: #5a6378">已授权的代码库</p>-->
                        <!--<div style="margin-left: 30px; margin-right: 30px">-->
                        <!--<div class="source">-->
                        <!--<div class="source-bar" style=" margin-right: 30px">-->
                        <!--<div class="row">-->
                        <!--<div class="ban4 pan">-->
                        <!--<h3>sourcename</h3>-->
                        <!--<p>username</p>-->
                        <!--</div>-->
                        <!--<div class="banmore" style="margin-top: 20px; font-size: 12px">-->
                        <!--<span>namenamename</span>-->
                        <!--</div>-->
                        <!--<div class="ban4" style="margin-top: 20px;">-->
                        <!--<span>www.aaaaa.com</span>-->
                        <!--</div>-->
                        <!--<div class="ban5 buttons" style="margin-top: 20px; position: relative;">-->
                        <!--<button type="button" ng-click="unbind()" class="btn btn-orange unbind" style="margin-right: 20px; width:80px; height:30px"-->
                        <!--&gt;解除绑定</button>-->
                        <!--<div class="token" ng-click="updateToken()" ng-mousemove="showpop()" ng-mouseleave="hidepop()">-->
                        <!--更新私有token-->
                        <!--</div>-->
                        <!--<div id="pop" ng-mousemove="showpop()" ng-mouseleave="hidepop()">-->
                        <!--<div class="popup" >-->
                        <!--<p style="font-size: 12px; color: white;padding-left: 10px">如何获取私有token?</p>-->
                        <!--<a href="javascript:;" ng-click="help()" style="text-decoration: none; padding-left: 35px; font-size: 12px; font-weight: bold">查看帮助</a>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</div>-->

                        <!--</div>-->
                        <!--</div>-->
                    </div>
                </uib-tab>
                <uib-tab index="4">
                    <uib-tab-heading>
                        <i class="orgbg"></i>&nbsp;&nbsp;项目管理
                    </uib-tab-heading>
                    <div class="row">
                        <!--<a style="margin-right:20px;" class="btn btn-green" id="creation"-->
                        <!--href="javascript:;">-->
                        <!--<i class="fa fa-plus fa-lg"></i>-->
                        <!--<span class="hidden-xs" ng-click="addOrg()">创建组织</span>-->
                        <!--</a>-->
                    </div>
                    <div class="row">
                        <!--<div class="h2-border row" style="margin-top:30px;">-->
                        <!--<span class="biaoti ng-binding" style="padding-right: 20px;background: #fff;position: relative;z-index: 100;">{{org.name}}</span>-->
                        <!--</div>-->
                        <div class="row">
                            <div class="orgList" ng-repeat="org in projects">
                                <div style="border-bottom: 1px solid #c9c9c9;padding:15px 0px; display:flex;justify-content: center;">
                                    <img src="pub/img/org_pic.png" alt=""
                                         style="">
                                </div>
                                <div class="caption">
                                    <p class="ng-binding" ng-click="checkoutorg(org.metadata.name)" style='white-space:nowrap;overflow: hidden;text-overflow: ellipsis;padding-left: 5px;padding-right: 5px; cursor: pointer;'>
                                        <a class="href-orange">{{org.metadata.annotations['openshift.io/display-name'] ||org.metadata.name}}</a>
                                    </p>
                                    <!--<a ng-click="leaveOrg($index,org.id,org.name,org.privileged)"-->
                                    <!--class="btn btn-orange ng-scope" id="leaveorg" style="width: 120px;"-->
                                    <!--href="javascript:;">离开组织</a>-->
                                </div>
                            </div>
                            <div style="text-align: center;background: #fff;position:relative" ng-if="!projects"><p class="blank_mg_block">  <span class="blank_mag_tit"> 您还没有任何组织管理数据</span></p></div>
                        </div>

                    </div>

                </uib-tab>
                <uib-tab index="5" ng-if="false">
                    <uib-tab-heading>
                        <i class="planbg"></i>&nbsp;&nbsp;交易记录
                    </uib-tab-heading>
                    <div class="row" style="margin-bottom: 30px;">
                        <!--<h5 class='col-md-12 buy'>交易记录</h5>-->
                        <!--<div class="user_tp">-->
                        <!--<date-pick st="grid.st" et="grid.et"></date-pick>-->
                        <!--<span style="font-size:14px;margin-left:10px;">付款方式：</span>-->
                        <!--<label ng-class="{'active': grid.hpay}" ng-click="grid.hpay=!grid.hpay"-->
                        <!--style="cursor: pointer;margin-right:4px;">-->
                        <!--<i class="faa faa-check"></i>-->
                        <!--&nbsp;&nbsp;鸿支付-->
                        <!--</label>-->
                        <!--<label ng-class="{'active': grid.coupon}" ng-click="grid.coupon=!grid.coupon"-->
                        <!--style="cursor: pointer;">-->
                        <!--<i class="faa faa-check"></i>-->
                        <!--&nbsp;&nbsp;优惠券-->
                        <!--</label>-->
                        <!--<span class="user_search trans_all">查询</span>-->
                        <!--</div>-->
                        <section class='col-md-12 user_list'>
                            <table class="table table-hover table-default" style="">
                                <tbody>
                                <tr>
                                    <th class="col-lg-2 col-md-2 col-sm-1">交易号</th>
                                    <th class="col-lg-2 col-md-2 col-sm-2">日期</th>
                                    <th class="col-lg-2 col-md-2 col-sm-2">业务类型</th>
                                    <th class="col-lg-2 col-md-2 col-sm-3">金额</th>
                                    <!--<th class="col-lg-2 col-md-2 col-sm-3">账户余额</th>-->
                                    <th class="col-lg-2 col-md-2 col-sm-3">付款方式</th>
                                </tr>
                                <tr ng-repeat="amount in myamounts">
                                    <td>{{amount.trans_id}}</td>
                                    <td>{{amount.creation_time | timescon}}</td>
                                    <td>{{amount.description}}</td>
                                    <td>{{amount.amount}}</td>
                                    <!--<td>2016/09/20</td>-->
                                    <!--<td>余额充值</td>-->
                                    <!--<td >￥2000</td>-->
                                    <!--<td>￥2300</td>-->
                                    <td>{{amount.payment_method | payFilter}}</td>
                                </tr>
                                <tr>
                                    <td colspan="5" style="text-align: center;background: #fff;position:relative" ng-if="myamounts.length===0"><p class="blank_block">  <span class="blank_tit"> 您还没有任何交易记录</span></p></td>
                                </tr>
                                <!--<tr>-->
                                <!--<td >1190349323</td>-->
                                <!--<td>2016/09/20</td>-->
                                <!--<td>余额充值</td>-->
                                <!--<td >￥2000</td>-->
                                <!--<td>￥2300</td>-->
                                <!--<td>支付宝</td>-->
                                <!--</tr>-->
                                </tbody>
                            </table>

                        </section>
                    </div>
                    <div class="text-center" ng-if="grid.total > 10">
                        <uib-pagination class="pagination"
                                        ng-model="grid.page"
                                        total-items="grid.total"
                                        items-per-page="grid.size"
                                        class="pagination-sm"
                                        boundary-links="false"
                                        max-size="12"
                                        rotate="true"
                                        previous-text="<"
                                        next-text=">"
                                        >
                        </uib-pagination>
                    </div>


                </uib-tab>

            </uib-tabset>
        </div>

    </div>
    <!--<script>-->
        <!--$('body').on('click','.tab-pane .text-right a',function(){-->
            <!--console.log('ll');-->
            <!--if(!$(this).parent().hasClass('disabled')){-->
                <!--window.scrollTo(0,0);-->
            <!--}-->
        <!--})-->
    <!--</script>-->

    <style>
        ul, li, ol {
            list-style: none;
        }

        .searchbill {
            margin-bottom: 0px;
        }

        #pop {
            height: 80px;
            position: relative;
            width: 100px;
            top: -110px;
            left: 90px;
            display: none
        }

        .popup {
            height: 50px;
            width: 150px;
            background-color: #000000;
            color: white;
            position: absolute;
            top: 20px;
            left: -5px;
            padding-left: 10px;
            border-radius: 3px;
        }

        .token {
            position: relative;
            border-radius: 2px;
            border: 1px solid #55c45f;
            width: 120px;
            background-color: #55c45f;
            height: 30px;
            padding: 5px 10px;
            color: white;
            margin-top: -30px;
            margin-left: 100px;
        }

        .token :hover {
            background-color: #469450;
        }

        .token :active {
            background-color: #68d472;
        }

        .form-group label {
            padding-top: 8px;
            font-weight: normal;
        }
        .margin{
            margin-bottom:30px;
        }

        .sendmail {
            margin-top: 5px;
            width: 100px;
            height: 36px;
            margin-left: 15px;
            background-color: #f6a540;
            border-radius: 2px;
            color: white;
            padding: 5px 10px;
        }

        .sendmail:hover {
            background-color: #5b73eb;
            cursor: pointer;
        }

        #creation {
            color: white;
        !important;
        }

        #leaveorg {
            color: white;
        }

        #updatepwd {
            color: #5c72e9;
            margin-top: 5px;
            cursor: pointer;
        }

        #updatepwd:hover {
            color: #6b5ce9;
        }

        #inactivation {
            position: absolute;
            left: -15px;
            top: 3px;
        }
        /*数据为空时状态*/
        .blank_block{margin-bottom:0;}
        .blank_tit{font-size:14px;color:#5a6378;margin-left:10px;vertical-align:middle;}
        .blank_mag_tit{margin-bottom:0;}
        .blank_mg_block{font-size:14px;border:1px solid #ccc;padding-top:10px;padding-bottom:10px;margin-top:14px;
            color:#5a6378;vertical-align:middle;}
        /*.tab-zn-default{*/
            /*padding:20px 40px 40px;*/
            /*background:#fff;*/
        /*}*/
        .tab-zn-default .tab-content{
            border:none;
            background:#fff;
        }
        .tab-zn-default .nav-tabs{
            background:#fff;
        }
        .tab-zn-default li.active .nav-link, .tab-zn-default li.active .nav-link:focus, .tab-zn-default li.active .nav-link:hover{

            border:none;
            border-bottom:2px solid #4960e6;
        }
    </style>
</div>
